<template>
  <a-modal
    :title="$t('外设')"
    :width="width"
    :visible="visible"
    @cancel="handleCancel"
    class="customHeight customHeightChild modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button @click="handleCancel">{{$t('关闭')}}</a-button>
    </template>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        class="j-table-force-nowrap"
      >
        <span slot="action" slot-scope="text, record">
          <a-popconfirm v-has="'DevicePeri:delete'" :title="$t('确定删除吗?')" @confirm="() => handleDelete(record.id)">
            <a style="margin-left: 7px">{{ $t('删除') }}</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
  </a-modal>
</template>
<script>
import { getAction, postAction, deleteAction } from '@/api/manage'
export default {
  name: 'DevicePeriModal',
  data() {
    return {
      width: 700,
      visible: false,
      loading: false,
      dataSource:[],
      columns:[
        {
          title:this.$t('设备名称'),
          align:'center',
          dataIndex:'name',
          width:'300px'
        },
        // {
        //   title:this.$t('版本号'),
        //   align:'center',
        //   dataIndex:'softVersion'
        // },
        {
          title: this.$t('操作'),
          dataIndex: 'action',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        delete: '/device/bisDevicePeri/delete',
      },
      deviceId:""
    }
  },
  methods: {
    edit(record) {
      this.visible = true
      this.dataSource = []
      this.deviceId = record.id
      getAction('/device/bisDevicePeri/list',{deviceId:record.id}).then(res=>{
        if(res.success){
          this.dataSource = res.result.records
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.deviceId = ""
    },
    handleDelete(id) {
      var that = this
      if (!that.url.delete) {
        that.$message.error(that.$t('请设置url.delete属性'))
        return
      }
      deleteAction(that.url.delete, { id: id }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.$message.success(res.message)
          that.loadData(1)
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    loadData(){
      this.dataSource = []
      getAction('/device/bisDevicePeri/list',{deviceId:this.deviceId}).then(res=>{
        if(res.success){
          this.dataSource = res.result.records
        }
      })
    }
  },
}
</script>